<template>
  <div class="app_content_container">
    <Breadcrumb :items="['计算方案']" />
    <BaseTable
      ref="baseTableRef"
      :apiUrl="getComputingSolutionList"
      :columns="columns"
      :otherQuery="{ type: 'system' }"
      placeholder="请输入名称"
      @handleEditOrAdd="$refs.addOrEditRef.open()"
      height="calc(100vh - 180px)"
    >
      <template #action="{ record }">
        <ga-link @click="$refs.addOrEditRef.open(record)">编辑</ga-link>
        <ga-link status="danger" @click="handleDelete(record)">删除</ga-link>
      </template>
    </BaseTable>
    <addOrEdit ref="addOrEditRef" @fetchData="$refs.baseTableRef.fetchData()" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { columns } from "./columns";
import {
  deleteComputingSolution,
  getComputingSolutionList,
} from "@/api/computingSolution";
import addOrEdit from "./addOrEdit.vue";
import { deleteModalWithRefresh } from "@/hooks/useWarningModal";

// 删除方法
const baseTableRef = ref(null);
const handleDelete = (record) => {
  deleteModalWithRefresh(record, deleteComputingSolution, () =>
    baseTableRef.value.fetchData()
  );
};
</script>

<style lang="scss" scoped></style>
